<template>
  <div class="wode">
    <!-- 导航栏NavBar -->
    <van-nav-bar title="(*^▽^*)" left-arrow>
      <template #right> <van-icon name="setting-o" /> </template>
    </van-nav-bar>
    <!-- <div v-if="!$store.state.islogin"> -->
    <!-- <div>
      <van-empty image="error" description="请登录">
        <van-button round type="danger" class="bottom-button" to="/login">登录</van-button>
      </van-empty>
    </div> -->
    <!-- <div v-else> -->
    <div>
      <div class="avatar">
        <!-- 布局----------------------------------- -->
        <van-row type="flex" align="center">
          <!-- 第一个图 -->
          <van-col span="7">
            <van-image
              round
              width="6rem"
              height="6rem"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <!-- 第二个只读 -->
          <van-col span="13">
            <van-cell-group width="20">
              <van-field :value="gxqm" readonly />
            </van-cell-group>
          </van-col>
          <!-- 第三个要弹框显示改变内容 -->
          <van-col span="3">
            <!-- 弹框按钮 -->
            <van-cell @click="showPopup"><van-icon name="plus" /></van-cell>
            <!-- 弹框的内容 -->
            <van-popup
              v-model="show"
              closeable
              close-icon="close"
              position="bottom"
              :style="{ height: '30%' }"
            >
              <van-cell-group>
                <van-field value="个新签名(12个字)" readonly />
                <van-field
                  v-model="value1"
                  clearable
                  left-icon="smile-o"
                />
              </van-cell-group>
            </van-popup>
            <!-- <van-button icon="plus" type="info" @click="crgxqm"/> -->
          </van-col>
        </van-row>
      </div>
      <div>
        <van-cell-group>
          <van-field label="个性签名" value="你好" readonly />
        </van-cell-group>
      </div>
    </div>

    <!-- 底部选项卡 ---------------------------------------------------->
    <van-tabbar v-model="dactive">
      <van-tabbar-item icon="home-o" name="home" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" name="fenlei" to="/fenlei">
        分类</van-tabbar-item
      >
      <van-tabbar-item icon="orders-o" name="caipu" to="/caipu"
        >菜谱</van-tabbar-item
      >
      <van-tabbar-item icon="cart-o" name="gouwuche" to="/gouwuche"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="manager-o" name="wode">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dactive: "wode",
      route: true,
      gxqm: "个性签名",
      // gxqm:'我就是我不一样的烟火哦你',
      show: false,
      value1:[],
    };
  },
  /////////////////监视///////////////////////////////////
  watch: {},
  //////////////////////////////////////////
  methods: {
      //点击弹窗
    crgxqm(){
        //把输入框的内容保存
        //在把内容给了gxqm输出展示
        value=this.value1;
        this.gxqm=value[0]
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>
<style>
.wode .avatar {
  width: 100%;
  /* justify-content: center; */
  margin-top: 10px;
  /* margin-left:10px; */
  background-color: red;
}
.wode .bottom-button {
  width: 160px;
  height: 40px;
}
</style>